<template>
    <transition name="fade">
        <div class="lg-preview-wrapper"
             v-show="preview.show"
             @touchmove.prevent
             @click="leave"
             @tap="leave"
        >
            <div class="lg-preview-loading" v-show="preview.loading">
                <div></div>
            </div>
            <div id="lgImgPreview">
                <img class="lg-preview-img"
                     v-if="preview.current.src"
                     :src="preview.current.src"
                     :alt="preview.current.title"
                     v-show="!preview.loading"
                >
            </div>
        </div>
    </transition>
</template>

<script>
    import PinchZoom from '../../plugin/js/pinchzoom'
    export default {
        name: 'Preview',
        computed: {
            preview () {
                return window.LOGIC_EVENT_BUS.LOGIC_PREVIEW
            }
        },
        data(){
            return {
                touchSubX: 0,
                touchSubY: 0
            }
        },
        methods: {
            touchstart(event){
                if (event.changedTouches[0].length > 1 && e.target.className == 'lg-preview-img') {
                    this.touchStartX = Math.abs(event.changedTouches[0].screenX - event.changedTouches[1].screenX);
                    this.touchStartY = Math.abs(event.changedTouches[0].screenX - event.changedTouches[1].screenX);
                }
            },
            touchmove(event){
                if (event.changedTouches[0].length > 1 && e.target.className == 'lg-preview-img') {
                    var distance = event.changedTouches[0].screenX - this.touchStartX;
                    var distance = event.changedTouches[0].screenX - this.touchStartX;
                }
            },
            touchend(event){
                if (event.changedTouches[0].length > 1 && e.target.className == 'lg-preview-img') {
                    var distance = event.changedTouches[0].screenX - this.touchStartX;
                }
            },
            leave (e) {
                if ((this.preview.show) && (e.target.className.indexOf('lg-preview-nav-arrow') != 0)) {
                    this.close()
                }
            },
            close () {
                document.getElementsByClassName('lg-preview-img')[0].removeAttribute('style')
                this.preview.show = false
            },
        },
        mounted(){

        }
    }
</script>

<style scoped>
    .lg-preview-wrapper {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.9);
        z-index: 1000;
    }

    .lg-preview-loading {
        position: absolute;
        top: 45%;
        left: 50%;
        margin-left: -7.5px;
    }

    .lg-preview-loading > div {
        background-color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        border: 2px solid #fff;
        border-bottom-color: transparent;
        height: 25px;
        width: 25px;
        background: transparent !important;
        display: inline-block;
        -webkit-animation: rotate 0.75s 0s linear infinite;
        animation: rotate 0.75s 0s linear infinite;
    }

    @keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
        }

        50% {
            -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(1);
        }

        100% {
            -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
        }
    }

    .lg-preview-img {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        z-index: 1001;
    }

    @media screen and (orientation: portrait) {
        .lg-preview-img {
            width: 100%;
        }
    }

    @media screen and (orientation: landscape) {
        .lg-preview-img {
            height: 100%;
        }
    }

    .lg-preview-title {
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
        color: #fff;
        background: rgba(0, 0, 0, .5);
        box-sizing: border-box;
        font-size: 0.8rem;
        height: 2rem;
        line-height: 2rem;
    }
</style>